<template>
  <a-modal
    :wrapClassName="wrapClassName"
    :title="title"
    :destroyOnClose="destroyOnClose"
    :visible="visible"
    :width="width"
    :okText="confirmLanguageText"
    :cancelText="cancelLanagueText"
    :confirmLoading="confirmLoading"
    :centered="centered"
    :okButtonProps="okButtonProps"
    :afterClose="afterClose"
    @ok="handleOk"
    @cancel="handleCancel"
    :zIndex="zIndex"
    :mask="mask"
    :footer="footer"
    :forceRender="forceRender"
    :getContainer="getContainer"
    :maskClosable="maskClosable"
  >
    <slot />
    <slot name="title" slot="title" />
    <slot name="footer" slot="footer" />
    <DIcon slot="closeIcon" :component="CloseIconSvg" />
  </a-modal>
</template>

<script>
import DIcon from './DIcon';
import CloseIconSvg from './assets/close.svg';
import zhCN from '../locale/zh-cn';

export default {
  name: 'DModal',
  props: {
    getContainer: {
      type: Function
    },
    afterClose: {
      type: Function
    },
    footer: {
      type: String
    },
    forceRender: {
      type: Boolean,
      default: false
    },
    title: {
      type: String
    },
    mask: {
      type: Boolean,
      default: true
    },
    zIndex: {
      type: Number,
      default: 1000
    },
    destroyOnClose: {
      type: Boolean,
      default: false
    },
    wrapClassName: {
      type: String
    },
    visible: {
      type: Boolean,
      default: false
    },
    width: {
      type: [String, Number],
      default: 500
    },
    okText: {
      type: String
    },
    cancelText: {
      type: String
    },
    confirmLoading: {
      type: Boolean,
      default: false
    },
    centered: {
      type: Boolean,
      default: true
    },
    okButtonProps: {
      type: Object
    },
    maskClosable: {
      type: Boolean,
      default: true
    }
  },
  inject: {
    ddLocaleData: {
      default: zhCN.locale
    }
  },
  computed: {
    confirmLanguageText() {
      if (this.okText) {
        return this.okText;
      }
      return this.ddLocaleData.modal.okText;
    },
    cancelLanagueText() {
      if (this.cancelText) {
        return this.cancelText;
      }
      return this.ddLocaleData.modal.cancelText;
    }
  },
  components: {
    DIcon
  },
  data() {
    return {
      CloseIconSvg
    };
  },
  methods: {
    handleOk() {
      this.$emit('update:visible', false);
      this.$emit('ok');
    },
    handleCancel() {
      this.$emit('update:visible', false);
      this.$emit('cancel');
    }
  }
};
</script>

<style lang="scss">
.tw-modal-header {
  border-bottom: 0;
  padding: 30px 30px 0 30px;
}
.tw-modal-content {
  border-radius: 0;
  background-clip: border-box;
}
.tw-modal-body {
  max-height: 550px;
  padding: 30px;
  overflow: auto;
}
.tw-modal-footer {
  border-top: 0;
  padding: 14px 30px;
  background: #f7f7f7;
}
.tw-modal-footer button + button {
  margin-left: 20px;
}
.tw-modal-close-x {
  font-size: 14px;
}
.tw-modal-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
</style>
